<!DOCTYPE HTML>
<html>
<head>
    <title>MAMAzzle</title> 
    <link rel="apple-touch-icon" href="img/icon.png"/>
    <link rel="apple-touch-startup-image" href="img/splash.png" /> 
    
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" /> 
    <!--meta name="viewport" content="width=1024,initial-scale=1,user-scalable = no"/-->
<script src="http://code.jquery.com/jquery-1.7.js"></script>

<style>
    /*
    #field {border:1px solid #555;margin:12px;padding:10px 18px;background:#443;border-radius:4px;}
    #field div {width:58px;height:58px;margin:0px;border:0px solid gray;float:left;line-height:58px;color:#aa9;text-align:center;font-family:arial;font-size:24px;font-weight:bold;
        border:1px solid #443;border-radius:25px;}
    #field div.selected {border-color:#505040;background:#332;font-size:22px;color:#dda;}
    #field div.selected.left {border-left-width:0px;border-top-left-radius:0px;border-bottom-left-radius:0px;}
    #field div.selected.right {border-right-width:0px;;border-top-right-radius:0px;border-bottom-right-radius:0px;}
    */
    body {margin:0px;padding:0px;background:#000;}
    #screen {width:1024px;height:768px;position:absolute;background:#d91;border-radius:4px;}
    #log {height:20px;color:#fff;}
    #bgrect {width:1012px;height:676px;position:absolute;background:#cca;top:85px;left:5px;box-shadow:0px 0px 5px #000;border:1px solid #cca;border-radius:4px;}
    #bgrect div {width:1012px;height:676px;position:absolute;background:#cca;box-shadow:inset 0px 0px 60px #997;border-radius:4px;}
    #field {width:1024px;height:768px;position:absolute;cursor:hand;}
    #header {width:1024px;height:80px;position:absolute;border-bottom:0px solid #c80;}
    #statusbar {width:1024px;height:20px;position:absolute;background:#000;opacity:0.5;}
    
    #field div {font-size:26px;font-family:georgia;text-align:center;overflow:hidden;font-weight:bold;}
    
    #field div span {display:block;width:100%;height:100%;-webkit-transform:scale(3) rotate(10deg);-webkit-transition: -webkit-transform .1s}
    #field div.selected span {-webkit-transform:scale(4) rotate(0deg);}
    #field div.marked span {-webkit-transform:scale(2) rotate(0deg);}
    
    #field div { color:#aa8;text-shadow:#fff 0px 0px 0px;-wwebkit-transition: color .2s}
    #field div.selected {text-shadow:#fff 0px 0px 0px;color:#fff;}
    
    #field div.marked {color:#fff;text-shadow:#775 0px 0px 8px;}
    #field div.marked.selected {color:#000;}

</style>
</head>

<body><div id="screen">

<div id="bgrect"><div></div></div>
<div id="field"></div>
<div id="header"></div>
<div id="statusbar"></div>
<script>
var COLS = 12;
var ROWS = 8;
var SIZE = 85;
var FLDPOS = {x:0,y:83};
function getCell(col, row) {
    return $("#field div:nth-child("+(col+row*COLS+1)+")");
}
function getCellByCoor(x,y) {
    return getCell(Math.floor((x - FLDPOS.x)/SIZE), Math.floor((y - FLDPOS.y)/SIZE))
    
}

$(document).ready(function() {
    var cellstr = "";
    for(var i=0;i<ROWS;i++) for (var j=0;j<COLS;j++){
        cellstr += "<div datacol="+j+" datarow="+i+" style='position:absolute;top:"+(FLDPOS.y+i*SIZE)+"px;left:"+(FLDPOS.x+j*SIZE)+"px;line-height:"+SIZE+"px;width:"+SIZE+"px;'><span>"+((i+j)%2==1?"M":"A")+"</span></d"+"iv>";
    }
    $("#field").html(cellstr);
    $("#field div span").each(function(i){this.style.webkitTransform="scale("+(1+Math.random()*1.5)+") rotate("+(Math.random()*180-90)+"deg)";});
    //$("#field div span").each(function(i){this.style.webkitTransform="scale(2) rotate("+(Math.random()*90-45)+"deg)";});

});



var SELECTED_ARR = [];

function getNeibCells(cell) {
    var col = cell.attr("datacol")*1;
    var row = cell.attr("datarow")*1;
    
    var val = {};
    val.left = getCell(col-1, row);
    val.right = getCell(col+1, row);
    val.top = getCell(col, row-1);
    val.bottom = getCell(col, row+1);
    return val;
}
function addDirectionClass(cellFrom, cellTo) {
    var col1 = cellFrom.attr("datacol")*1;
    var row1 = cellFrom.attr("datarow")*1;
    var col2 = cellTo.attr("datacol")*1;
    var row2 = cellTo.attr("datarow")*1;
    if (col1>col2) {cellFrom.addClass("left");cellTo.addClass("right");}
    if (col1<col2) {cellFrom.addClass("right");cellTo.addClass("left");}
    if (row1>row2) {cellFrom.addClass("top");cellTo.addClass("bottom");}
    if (row1<row2) {cellFrom.addClass("bottom");cellTo.addClass("top");}
}
function checkArray() {
    var str = "";
    //alert(SELECTED_ARR[0].attr("datacol"));
    for(var i=0;i<SELECTED_ARR.length;i++) {
        str += SELECTED_ARR[i].text();
    }
    if (str === "MAMA") {
        $(".selected.marked").removeClass("selected marked");
        $(".selected").removeClass("selected").addClass("marked");
        
        /*
        for(var i=0;i<SELECTED_ARR.length;i++) {
            SELECTED_ARR[i].addClass("marked");
            //var neibs = getNeibCells(SELECTED_ARR[i]);
            //if (i>0) addDirectionClass(SELECTED_ARR[i], SELECTED_ARR[i-1]);
           
            if (neibs.left.hasClass("selected")) SELECTED_ARR[i].addClass("left");
            if (neibs.right.hasClass("selected")) SELECTED_ARR[i].addClass("right");
            if (neibs.top.hasClass("selected")) SELECTED_ARR[i].addClass("top");
            if (neibs.bottom.hasClass("selected")) SELECTED_ARR[i].addClass("bottom");
            
        }*/
        //$(".selected").addClass("marked");
        return true;
    }
    return false;
}
function addToArray() {
    
}

document.getElementById("field").onmousedown=function(e) {
    
    $(".selected").removeClass("selected");
    SELECTED_ARR.length = 0;
    SELECTED_ARR.push(getCellByCoor(e.clientX, e.clientY));
    getCellByCoor(e.clientX, e.clientY).addClass("selected");
    $("#field div.selected span").each(function(i){this.style.webkitTransform="scale(2) rotate(0deg)";});
    return false;
}
document.getElementById("field").onmousemove=function(e) {
    if ($(".selected").length<1) return false;
    if (getCellByCoor(e.clientX, e.clientY).hasClass("selected")) return false;
    SELECTED_ARR.push(getCellByCoor(e.clientX, e.clientY));
    getCellByCoor(e.clientX, e.clientY).addClass("selected");
    $("#field div.selected span").each(function(i){this.style.webkitTransform="scale(2) rotate(0deg)";});
    return false;
}
document.getElementById("field").onmouseup=function(e) {
    if ($(".selected").length<1) return false;
    if (!getCellByCoor(e.clientX, e.clientY).hasClass("selected")) {;
        SELECTED_ARR.push(getCellByCoor(e.clientX, e.clientY));
        getCellByCoor(e.clientX, e.clientY).addClass("selected");
    }
    $("#field div.selected span").each(function(i){this.style.webkitTransform="scale("+(1+Math.random()*2)+") rotate("+(Math.random()*180-90)+"deg)";});
    
    $("#log").html(SELECTED_ARR.length + ":"+checkArray());
    //check
    
    
    $(".selected").removeClass("selected");
    
    $("#field div.marked span").each(function(i){this.style.webkitTransform="scale(1) rotate(0deg)";});
    return false;
}





</script>
</div></body>
</html>
